<template>
    <div>
        <el-select v-model="locale" @change="handleChangeLang">
            <el-option label="中文" value="zhCn"/>
            <el-option label="英文" value="en"/>
        </el-select>
        <!-- 插值用法 https://blog.csdn.net/weixin_59916662/article/details/127844219 -->
        <!-- 使用手册 https://www.bookstack.cn/read/vue-i18n-8.x/5d384cf90bc6ab52.md -->
        <p>{{ $t('home.guessYourInfo')}}</p>
        <!-- 命名插值 -->
        <p>{{ $t('home.school', school)}}</p>
        <!-- 列表插值 -->
        <p>{{ t('home.hint', surplusArr)}}</p>
        <!-- 关联翻译信息 -->
        <p>{{ $t('baike.cover') }}</p>
        <p>{{ $t('home.address') }}</p>
        <p>{{ $t('home.upperAdd') }}</p>
        <!-- 自定义修饰符 -->
        <p>{{ $t('home.snakeHint') }}</p>
        <!-- HTML -->
        <p v-html="$t('home.htmlMsg')"></p>
    </div>
</template>
<script setup>
import { computed } from '@vue/runtime-core'
import { useI18n } from 'vue-i18n'
import { useStore } from 'vuex'
const { locale, t } = useI18n()
const store = useStore()
const surplusArr = computed(() => {
    return store.getters.getCurLang === 'zhCn' ? ['1','张三丰'] : ['1', 'Zhang SanFeng']
})
const school =computed(() => {
    return store.getters.getCurLang === 'zhCn' ? {'school': '西安工程大学'} : {'school': 'XPU'}
})
const handleChangeLang = (val) => {
    store.commit('changeLang',val)
}
</script>
